import { Button, message, Modal, Space } from 'ant-design-vue'
import { defineComponent, nextTick, ref, watch } from 'vue'

import { type ProTableProps, type ProTableRef, ProTable } from '@/components'
import { useDialog } from '@/hooks'

import ShopList from './shopList'

export default defineComponent({
  name: 'ShopSelectList',
  props: {
    restaurants: {
      type: Array,
      required: true
    },
    brandId: {
      type: Number,
      required: true
    },
    onlyId: {
      type: Boolean,
      required: false,
      default: true
    },
    province: {
      type: String,
      required: true
    },
    city: {
      type: String,
      required: true
    }
  },
  emits: ['dataCallback'],
  setup(props, { emit }) {
    const { showConfirm } = useDialog()
    const showShopModal = ref(false)
    const shopList = ref<ComponentRef>({})
    const shopSelect = ref(props.restaurants as any[])

    const tableRef = ref({} as ProTableRef)

    const tableConfig = ref({
      fixedHeight: 400,
      options: {
        border: true,
        align: 'center',
        columns: [
          {
            title: '门店名称',
            field: 'restaurantName',
            minWidth: 150
          },
          {
            title: '操作',
            slots: {
              default: 'operation'
            },
            width: 100
          }
        ]
      }
    } as ProTableProps)

    watch(
      () => props.restaurants,
      () => {
        shopSelect.value = props.restaurants
      },
      {
        immediate: true
      }
    )

    function handleDeleteShop(row) {
      showConfirm({
        content: '确认删除该门店？',
        onOk: () => {
          shopSelect.value = shopSelect.value.filter(val => {
            return val.id != row.id
          })
          handleCallback()
        }
      })
    }

    function handleShowShopSelect() {
      if (!props.brandId) {
        message.warning('请先选择供应商')
        return
      }
      showShopModal.value = true
      nextTick(() => {
        shopList.value!.showModal(
          props.brandId,
          props.province,
          props.city,
          shopSelect.value
        )
      })
    }

    function handleShopSelect() {
      const list = shopList.value!.handleShopSelect().map(val => {
        return { id: val.id, restaurantName: val.restaurantName }
      })
      if (shopSelect.value) {
        shopSelect.value = shopSelect.value.concat(list)
      } else {
        shopSelect.value = list
      }
      handleCallback()
      showShopModal.value = false
    }

    function handleCallback() {
      let shops
      if (props.onlyId) {
        shops = shopSelect.value.map(val => {
          return val.id
        })
      } else {
        shops = shopSelect.value
      }
      emit('dataCallback', shops)
    }

    function handleCleanData() {
      shopSelect.value = []
    }

    return {
      tableRef,
      tableConfig,
      shopList,
      shopSelect,
      showShopModal,
      handleShopSelect,
      handleDeleteShop,
      handleShowShopSelect,
      handleCleanData
    }
  },
  render() {
    return (
      <div>
        <Button type="primary" onClick={this.handleShowShopSelect}>
          选择门店
        </Button>
        <ProTable
          ref="tableRef"
          data={this.shopSelect}
          v-show={this.shopSelect?.length > 0}
          style={{ width: '450px', marginTop: '10px' }}
          v-slots={{
            provinceRow: ({ row }) => (
              <Space>
                <span>{`${row.provinceName ? row.provinceName : ''}${
                  row.cityName ? row.cityName : ''
                }`}</span>
              </Space>
            ),
            timeRow: ({ row }) => (
              <Space>
                <span>
                  {row.openTime ? `${row.openTime} - ${row.closeTime}` : ''}
                </span>
              </Space>
            ),
            operation: ({ row }) => (
              <Space>
                <Button
                  type="link"
                  size="small"
                  onClick={() => this.handleDeleteShop(row)}
                >
                  删除
                </Button>
              </Space>
            )
          }}
          {...this.tableConfig}
        />
        <Modal
          v-model:visible={this.showShopModal}
          title="选择店铺"
          destroyOnClose
          onOk={this.handleShopSelect}
          width={900}
        >
          <ShopList ref="shopList" />
        </Modal>
      </div>
    )
  }
})
